﻿@{
    ViewBag.Title = "Home Page";
}

<style>
    .canvas {
        border: 1px solid rgb(170, 170, 170);
        cursor: pointer;
    }

    iframe {
        border: solid;
        border-color: blue;
        border-width: 1px;
    }
</style>

<script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/jsrender/1.0.4/jsrender.min.js"></script>
<script src="~/Scripts/layui/layui.js"></script>
<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/ext.js" type="text/javascript"></script>
<script src="~/Scripts/fabric.min.js"></script>
<script type="text/javascript">


    function ConvertFile() {
        $.ajax({
            method: "post",
            url: "/Home/ConvertPPt",
            success: function (data) {
                alert(data.message);
            }
        });
    }
    var navMenuList = "";
    function GetPPTResult() {
        $.ajax({
            method: "post",
            url: "/Home/GetPPTResult",
            success: function (data) {
                ppts = data;
                var html = $('#NavTemplate').render(data);
                $('#NavMenuList').html(html);
            }
        });
    }
    var pptIndex = 0;
    var ppts = [];

    function openPPT() {
        showFrame();
    }
    function up() {
        if (pptIndex > 0) {
            pptIndex -= 1;
        } else {
            pptIndex = 0;
        }
        showFrame();
    }
    function down() {
        if (pptIndex >= ppts.length) {
            pptIndex = ppts.length;
        }
        else {
            pptIndex += 1;
        }
        showFrame();
    }
    function frameLoad() {
        var frameDocument = window.frames["pptsrc"].document; 
        var oHead = frameDocument.getElementsByTagName("head");
        if (oHead && oHead.length) {
            oHead = oHead[0];
        } else {
            oHead = oBody;
        }
        var scriptJQ = frameDocument.createElement('script');
        scriptJQ.type = 'text/javascript';
        scriptJQ.src = '/Scripts/jquery-3.4.1.min.js';
        oHead.appendChild(scriptJQ);

        var scriptLayui = frameDocument.createElement('script');
        scriptLayui.type = 'text/javascript';
        scriptLayui.src = '/Scripts/layui/layui.js';
        oHead.appendChild(scriptLayui);

        var cssLayui = frameDocument.createElement('link');
        cssLayui.rel = 'stylesheet';
        cssLayui.href = '/Scripts/layui/css/layui.css';
        oHead.appendChild(cssLayui);

        var scriptExt = frameDocument.createElement('script');
        scriptExt.type = 'text/javascript';
        scriptExt.src = '/Scripts/ext.js';
        oHead.appendChild(scriptExt);

        var hyperlinkList = frameDocument.getElementsByTagName("a");
        for (var i = 0; i < hyperlinkList.length; i++) {
            //获取超链接的子元素
            var linkName = "";
            for (var j = 0; j < hyperlinkList[i].children.length; j++) {
                linkName += hyperlinkList[i].children[j].innerHTML;
            }
            if (hyperlinkList[i].getAttribute("xlink:href")) {
                hyperlinkList[i].setAttribute("onclick", "showUrl('" + hyperlinkList[i].getAttribute("xlink:href") + "','" + linkName + "');");
                hyperlinkList[i].setAttribute("xlink:href", "javascript:void(0)");
            }
        }
        getPPtSlideHyperlink();
    }
    function showFrame() {
       $("#pptsrc").attr("src", ppts[pptIndex].html);
        if (remarkVisbile) {
            $('#RemarkDiv').html(ppts[pptIndex].remark);
        } 
    }
    //==========================超链接列表===============================
    //获取ppt页面上的超链接
    function getPPtSlideHyperlink() {
        var navlist = "";
        if (ppts.length > 0) {
            var lstHyper = ppts[pptIndex].lstHyperlinkInfo;
            for (var i = 0; i < lstHyper.length; i++) {
                var item = lstHyper[i];
                navlist += item.title + ":" + item.url + "<br/>";
            }
            var navData = document.getElementById("HyperlinkList");
            if (navData) {
                navData.innerHTML = navlist;
            }
        }
    }
    var HyperlinkVisbile = false;
    function HyperlinkVisible() {
        HyperlinkVisbile = !HyperlinkVisbile;
        if (HyperlinkVisbile) {
            $('#HyperlinkList').css("display", "block");
        }
        else {
            $('#HyperlinkList').css("display", "none");
        }
    }

    //==========================备注===============================
    var remarkVisbile = false;
    function RemarkVisible() {
        remarkVisbile = !remarkVisbile;
        if (remarkVisbile) {
            $('#RemarkDiv').html(ppts[pptIndex].remark);
            $('#RemarkDiv').css("display", "block");

        }
        else {
            $('#RemarkDiv').css("display", "none");
        }
    }

    //==========================导航===============================
    var navVisbile = false;
    function NavVisible() {
        navVisbile = !navVisbile;
        if (navVisbile) {
            $('#NavList').css("display", "block");
        }
        else {
            $('#NavList').css("display", "none");
        }
    }
    //点击导航
    function clickNav(index) {
        pptIndex = index;
        showFrame();
    }

    //============================================画图================================================
    $(function () {
        InitCancas();
    });
    var canvas;
    function InitCancas() {
        canvas = new fabric.Canvas("freeCanvas", {
            isDrawingMode: true,
            selection: false,
            width: 1500,
            height: 800
        });
    }
    //清除画板
    function clearCanvas() {
        canvas.clear();
    }
</script>
<div class="row">
    <button type="button" onclick="ConvertFile()">转换文件</button>
    <div id="ctrl" style="border:1px; border-color:red; border:solid">
        <iframe id="pptsrc" name="pptsrc" style="width:1500px;height:800px;" onload="frameLoad()" >
            </iframe> 
        <!--超链接列表-->
        <div id="HyperlinkList" style="border:solid;border-color:black;border-width:1px;display:none">
        </div>

        <!--备注-->
        <div id="RemarkDiv" style="border:solid;border-color:black;border-width:1px;display:none">
        </div>
        <!--导航-->
        <div id="NavList" style="border:solid;border-color:black;border-width:1px; display:none;overflow:auto;height:100px;">
            <ul id="NavMenuList">
                <script type="text/x-jsrender" id="NavTemplate">
                    <li onclick="clickNav('{{:index}}')">
                        <img src="{{:thumbnail}}" style="width:80px;height:60px;" />
                        <label> {{:title}} </label>
                    </li>
                </script>
            </ul>
        </div>
        <!--ppt控制条-->
        <div class="ctrl_bar">
            <button type="button" onclick="GetPPTResult()">1:转换结果</button>
            <button type="button" onclick="openPPT()">2:打开文件</button>
            <button type="button" onclick="up()">3:上一页</button>
            <button type="button" onclick="down()">4:下一页</button>
            <button type="button" onclick="HyperlinkVisible()">5:超链接列表</button>
            <button type="button" onclick="RemarkVisible()">6:备注</button>
            <button type="button" onclick="NavVisible()">7:导航</button>
            <button type="button" onclick="clearCanvas()">8:清除画板</button>
            <button type="button" onclick="drawLine()">8.1:画直线</button>
        </div>
    </div> 
    <canvas id="freeCanvas" width="1500" height="800" style="border:1px;border-color:black; border:solid" class="canvas">
    </canvas>
</div>